<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获得元素尺寸</title>
    <style>
      div {
        background-color: pink;
        width: 300px;
        height: 300px;
        padding: 10px;
        border: 1px solid skyblue;
      }
    </style>
</head>
<body>
<div></div>
<script>
  var div = document.querySelector('div');
  //获得元素的内容区 + padding + border
  console.log(div.offsetHeight);
  console.log(div.offsetWidth);
  //获得元素内容 + padding
  console.log(div.clientHeight);
  console.log(div.clientWidth);
</script>
</body>
</html>